<!-- 购物车 -->
<template>  
    <div class="cart">
        <div class="header">
            <Lheader>
                <h3 slot="tit">购物车</h3>
            </Lheader>
        </div>
        <div v-if="fal" class="isLogin">
            <p >登陆后将同步您的购物车商品</p>
            <button class="isBtn" @click="routLogin">登录</button>
        </div>
        <div class="box">
            <img src="https://img02.hua.com/m/Shopping/m_shopping_empty_cart.png?v2" alt="">
            <p class="tit">购物车内暂时没有商品</p>
            <button class="btn" @click="routerP">去逛逛</button>
        </div>
        <div class="end">
            <Llike></Llike>
        </div>
        <!-- <h1>购物车</h1> -->
    </div>
</template>

<script>
import Lheader from './components/LheaderView.vue';
import Llike from './components/LlikeView.vue';

    export default{
        name:"cart",
        data(){
            return {
                fale:false, //判断是否跳转页面
                fal:true,
            }
        },
        components:{
            Lheader, //头部
            Llike,
        },
        created(){
            // console.log(this.$store.state.shopping);
            console.log(localStorage.getItem('phone'));
            if(localStorage.getItem('phone')){
                this.fal = false;
            }else{
                this.fal = true
            }

            // 判断vuex购物车是否有数据
            if(this.$store.state.shopping.length >= 1){
                this.fale = true;
                if(this.fale){
                    this.$router.push('/CartList')
                }
            }else{
                this.fale = false;
            }
        },
        mounted(){
        },
        methods:{
            // 跳转首页
            routerP(){
                this.$router.push('/Index')
            },
            // 跳转登录
            routLogin(){
                this.$router.push('/Login')
            }
        }
    }
</script>

<style lang="less" scoped>
.cart{
    .end{
        padding-top: .3rem;
    }
    .header{
        height: .88rem;
        border-bottom: solid 1px #ccc;
    }
    .isLogin{
        height: .8rem;
        background-color: rgb(247, 229, 217);
        display: flex;
        justify-content: center;
        align-items: center;
        .isBtn{
            width: 1.1rem;
            height: .52rem;
            background-color: rgb(247, 229, 217);
            border: solid 1px rgb(250, 171, 34);
            border-radius: .25rem;
            margin-left: .2rem;
        }
    }
    .box{
        // display: flex;
        border-bottom: solid .2rem rgb(240, 240, 240);
        padding: 1.5rem 0;
        text-align: center;
        img{
            margin: 0 auto .2rem;
            width: 2.6rem;
            height: 2rem;
        }
        .btn{
            width: 2.2rem;
            height: .56rem;
            border-radius: .3rem;
            color: #fff;
            background-color: rgb(249, 172, 56);
            font-weight: 800;
            margin-top: .3rem;
        }
    }
}
</style>